<template>
  <el-container class="bg-white rounded" :style="{ height: (h +'px') }">
    <el-header class="image-header">
      <el-button type="primary" size="small" @click="handleOpenCreate()">+新增图片分类</el-button>
      <el-button type="primary" size="small" @click="handleUpdataImage()">上传图片+</el-button>
    </el-header>
    <el-container>
      <ImageAside ref="imageAsideRef" @changeImage="handleAsideChange"/>
      <ImageMain ref="imageMainRef" />
    </el-container>
  </el-container>
</template>

<script setup lang='ts'>
import {ref} from 'vue'
import ImageAside from '@/components/imageAside.vue'
import ImageMain from '@/components/imageMain.vue'
import { color } from 'echarts'

// data 数据
const windowHeight = window.innerHeight || document.body.clientHeight
const h = windowHeight - 64 -44 - 40

const imageAsideRef = ref<any>(null)
const imageMainRef = ref<any>(null)

const handleOpenCreate = () => imageAsideRef.value.handlCreate()

const handleAsideChange = (id:number) =>{
  // console.log('id',id);
  imageMainRef.value.loadData(id)
}

const handleUpdataImage = () =>{
  imageMainRef.value.handleOpenFile()
}


</script>

<style scoped lang="less">
.image-header{
  border-bottom: 1px solid #eeeeee;
  @apply flex items-center;
}



</style>
